{% extends "layouts/default.html.twig" %}

{% block title %}{{ 'User settings'|trans }}{% endblock %}

{% block body %}
    <div class="container-fluid">

        {{ include('partials/_page_header.html.twig', {header: 'User settings'|trans, description:''}) }}

        <div class="row">
            <div class="col col-xs-6">

                <h4>User details</h4>

                <form action="{{ url_for('user') }}" method="post">
                    <div class="mb-3">
                        <label class="form-label" for="inputUsername">Username</label>
                        <input name="username" value="{{ username }}" type="text" id="inputUsername"
                               class="form-control"
                               placeholder="Username" aria-describedby="username_helpblock" disabled>
                        <div id="username_helpblock" class="form-text">Username can't be changed</div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="inputEmail">Email</label>
                        <input name="email" value="{{ email }}" type="email" id="inputEmail" class="form-control"
                               placeholder="Email address" readonly>
                        <div id="email_helpblock" class="form-text">This will come in a next version ;)</div>
                    </div>

                    <button class="btn btn-sm btn-primary pull-right" disabled="disabled" type="submit">Update</button>
                    {{ csrf|raw }}
                </form>

            </div>
        </div>

        <div class="row">
            <div class="col col-xs-4 mt-3">

                <h4>Password management</h4>

                <form action="{{ url_for('user') }}" method="post" data-toggle="validator">
                    <div class="form-group">
                        <label for="currentpass">Current password</label>
                        <input name="oldpassword" type="password" id="oldpassword" class="form-control"
                               placeholder="Current password" aria-describedby="currentpass" required>
                        <span id="currentpass" class="form-text">Your current password (required)</span>

                        <br/>
                        <label for="newpass">New password</label>
                        <input name="newpassword" type="password" id="inputpassword" class="form-control"
                               placeholder="New password" data-minlength="6" required>
                        <div class="form-text">Password must be at least 8 characters</div>
                        <label for="inputUsername">Confirm</label>
                        <input name="confnewpassword" value="" type="password" data-minlength="6"
                               data-match="#inputpassword" data-match-error="Passwords don't match"
                               id="inputconfpassword" class="form-control" placeholder="Confirm new password" required>

                        <input type="hidden" name="action" value="passwordreset">

                        <br/>
                        <button class="btn btn-sm btn-primary pull-right" type="submit">Reset password</button>
                        {{ csrf|raw }}
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}